import 'package:cher_flare/modules/home_page/views/ly_medal_buy_page.dart';
import 'package:cher_flare/routes/app_pages.dart';
import 'package:cher_flare/utils/ly_data_manager.dart';
import 'package:cher_flare/utils/ly_medal_manager.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../../utils/app_color.dart';

class LYMedalPage extends StatefulWidget {
  const LYMedalPage({super.key});

  @override
  State<LYMedalPage> createState() => _LYMedalPageState();
}

class _LYMedalPageState extends State<LYMedalPage> {
  bool isGerminationUnlock = false;
  bool isSeedlingStageUnlock = false;
  bool isSaplingStageUnlock = false;
  bool isMatureStageUnlock = false;

  void _detailIconDidCLick() {
    Get.toNamed(AppPages.strategyPage);
  }

  void _medalDidClick(LYMedalType type) async {
    // debugPrint('============${type.value}');
    final isUnlock = await LYHomeDataManager.share.isMedalUnLock(type);
    if (!isUnlock) {
      Get.dialog(
              LYMedalBuyPage(
                type: type,
              ),
              useSafeArea: false,
              barrierDismissible: false)
          .then((value) {
        refreshMedalStatus();
      });
    }
  }

  @override
  void initState() {
    super.initState();
    refreshMedalStatus();
  }

  void refreshMedalStatus() async {
    isGerminationUnlock =
        await LYHomeDataManager.share.isMedalUnLock(LYMedalType.germination);
    isSeedlingStageUnlock =
        await LYHomeDataManager.share.isMedalUnLock(LYMedalType.seedlingStage);
    isSaplingStageUnlock =
        await LYHomeDataManager.share.isMedalUnLock(LYMedalType.saplingStage);
    isMatureStageUnlock =
        await LYHomeDataManager.share.isMedalUnLock(LYMedalType.matureStage);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Medal',
          style: TextStyle(fontSize: 18, color: AppColors.color202020),
        ),
        backgroundColor: AppColors.colorD7FFDF,
        leading: InkWell(
          child: Image.asset(
            'assets/images/back_icon.png',
            width: 24,
            height: 24,
          ),
          onTap: () {
            Get.close(0);
          },
        ),
        elevation: 0,
        centerTitle: true,
        actions: [
          Padding(
            padding: const EdgeInsets.only(right: 21),
            child: InkWell(
              onTap: () {
                _detailIconDidCLick();
              },
              child: Image.asset(
                'assets/images/gan_tan_hao.png',
                width: 22,
                height: 22,
              ),
            ),
          ),
        ],
      ),
      backgroundColor: AppColors.colorF9FDF0,
      body: Stack(
        fit: StackFit.expand,
        children: [
          Positioned(
              bottom: 0,
              right: 0,
              left: 0,
              child: Image.asset('assets/images/medal_page_bg.png')),
          Positioned.fill(
              child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                _makeItem('Onset Oath Badge', 'onset_oath _badge_left.png',
                    'onset_oath _badge_right.png', LYMedalType.germination,
                    isLock: !isGerminationUnlock),
                const SizedBox(
                  height: 32,
                ),
                _makeItem(
                    'Steadfast Streak Crest',
                    'steadfast_streak_crest_l.png',
                    'steadfast_streak_crest_r.png',
                    LYMedalType.seedlingStage,
                    isLock: !isSeedlingStageUnlock),
                const SizedBox(
                  height: 32,
                ),
                _makeItem(
                    'Persistent Pledge Medallion',
                    'persistent_pledge_medallion_l.png',
                    'persistent_pledge_medallion_r.png',
                    LYMedalType.saplingStage,
                    isLock: !isSaplingStageUnlock),
                const SizedBox(
                  height: 32,
                ),
                _makeItem(
                    'Triumphant Commitment Emblem',
                    'triumphant_commitment_emblem_l.png',
                    'triumphant_commitment_emblem_r.png',
                    LYMedalType.matureStage,
                    isLock: !isMatureStageUnlock),
              ],
            ),
          )),
        ],
      ),
    );
  }

  Widget _makeItem(
      String title, String leftImgName, String rightImgName, LYMedalType type,
      {bool isLock = true}) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          alignment: Alignment.center,
          padding: const EdgeInsets.only(top: 12, bottom: 24),
          child: Text(
            title,
            style: const TextStyle(fontSize: 12, color: AppColors.color39910F),
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Expanded(
              flex: 1,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Image.asset(
                    'assets/images/$leftImgName',
                    width: 68,
                    height: 68,
                  ),
                  Container(
                    padding: const EdgeInsets.only(top: 15),
                    child: Text(
                      'Gained',
                      style: TextStyle(
                          color: colorWithRGBA(r: 0, g: 0, b: 0, a: 0.3),
                          fontSize: 12),
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              flex: 1,
              child: InkWell(
                onTap: () => _medalDidClick(type),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    SizedBox(
                      width: 68,
                      height: 68,
                      child: Stack(
                        alignment: Alignment.center,
                        children: [
                          Image.asset(
                            'assets/images/$rightImgName',
                            width: 68,
                            height: 68,
                          ),
                          Visibility(
                            visible: isLock,
                            child: Container(
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                  color:
                                      colorWithRGBA(r: 0, g: 0, b: 0, a: 0.4),
                                  borderRadius: BorderRadius.circular(34)),
                              child: Image.asset(
                                'assets/images/medal_lock_img.png',
                                width: 16,
                                height: 21,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    const SizedBox(
                      height: 8,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Image.asset(
                          'assets/images/cher_flare_coin_50_icon.png',
                          width: 18,
                          height: 18,
                        ),
                        const SizedBox(
                          width: 4,
                        ),
                        const Text(
                          '49',
                          style: TextStyle(
                              color: AppColors.color565656,
                              fontWeight: FontWeight.bold,
                              fontSize: 14),
                        )
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }
}
